<template>
  <div class="task-operate">
    <Card class="operate-card">
      <template slot="title">
        <p>{{ !isEdit ? '创建任务' : '编辑任务' }}</p>
      </template>
      <template slot="extra">
        <Button type="primary" @click="exitBtn" icon="md-exit">
          退出
        </Button>
      </template>
      <div class="operate-bread">
        <Breadcrumb>
          <BreadcrumbItem>{{ breadcrumbObj.title }}</BreadcrumbItem>
          <BreadcrumbItem>{{ breadcrumbObj.subTitle }}</BreadcrumbItem>
        </Breadcrumb>
      </div>
      <!--form表单区域-->
      <ship-towing-operate v-if="taskType === 'ship-towing-task'" :isEdit="isEdit"></ship-towing-operate>
      <sea-supply-operate v-if="taskType === 'sea-supply-task'" :isEdit="isEdit"></sea-supply-operate>
      <marine-life-operate v-if="taskType === 'marine-life-task'" :isEdit="isEdit"></marine-life-operate>
      <military-road-operate v-if="taskType === 'military-road-task'" :isEdit="isEdit"></military-road-operate>
      <warehousing-service-operate v-if="taskType === 'warehousing-service-task'" :isEdit="isEdit"></warehousing-service-operate>
      <material-procurement-operate v-if="taskType === 'material-procurement-task'" :isEdit="isEdit"></material-procurement-operate>
      <security-services-operate v-if="taskType === 'security-services-task'" :isEdit="isEdit"></security-services-operate>

    </Card>
  </div>
</template>

<script>
import api from '@/api/task'
import ShipTowingOperate from './operate-module/ship-towing-operate'
import SeaSupplyOperate from './operate-module/sea-supply-operate'
import MarineLifeOperate from './operate-module/marine-life-operate'
import MilitaryRoadOperate from './operate-module/military-road-operate'
import WarehousingServiceOperate from './operate-module/warehousing-service-operate'
import MaterialProcurementOperate from './operate-module/material-procurement-operate'
import SecurityServicesOperate from './operate-module/security-services-operate'

export default {
  name: "TaskOperate",
  components: {
    ShipTowingOperate,
    SeaSupplyOperate,
    MarineLifeOperate,
    MilitaryRoadOperate,
    WarehousingServiceOperate,
    MaterialProcurementOperate,
    SecurityServicesOperate
  },
  data() {
    return {
      taskType: null,
      isEdit: true,
      formItem: {
        taskCode: '',
        taskType: '',
        taskFuncType: '',
        priority: '',
        targetPort: '',
        taskStatus: '',
        taskDesc: '',
        dragPoint: '',
        shipCount: '',
        estimatedStartTime: '',
        contactName: '',
        contactPhone: '',
        acceptorName: '',
        acceptorPhone: '',
        imgs: '',
        currFlow: 0
      },
      ruleValidate: {
        taskCode: [
          {required: true, message: '请填写', trigger: 'blur'},
          {pattern: /^[0-9a-zA-Z]*$/g, message: '只能输入字母或数字'},
          {
            type: 'string',
            max: 20,
            message: '长度不能超过20个字符',
            trigger: 'blur'
          }
        ],
        targetPort: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        taskStatus: [
          {required: true, message: '请选择', trigger: 'change'}
        ],
        dragPoint: [{required: true, message: '请填写', trigger: 'blur'}],
        shipCount: [{required: true, message: '请填写', trigger: 'blur'},
          {pattern: /^[0-9]*$/g, message: '只能输入数字'}],
        contactName: [{required: true, message: '请填写', trigger: 'blur'}],
        contactPhone: [{required: true, message: '请填写', trigger: 'blur'},
          {pattern: /^1[3456789][0-9]{9}$/, message: '请输入合法的手机号'}],
        acceptorName: [{required: true, message: '请填写', trigger: 'blur'}],
        acceptorPhone: [{required: true, message: '请填写', trigger: 'blur'},
          {pattern: /^1[3456789][0-9]{9}$/, message: '请输入合法的手机号'}],
        estimatedStartTime: [{required: true, message: '请选择', trigger: 'change', type: 'date'}]
      },
      breadcrumbObj: {
        title: '',
        subTitle: ''
      }
    }
  },
  created() {
    this.taskType = this.$route.query.taskType;
    if(this.$route.query !== undefined && this.$route.query.id !== undefined) {
      this.isEdit = true;
      api.getById(this.$route.query.id).then(({data}) => {
        if (data.returnCode === 200) {
          this.formItem = data.returnData;
          let list = this.formItem.taskType.split('-');
          this.breadcrumbObj.title = this.$dataInfo.getTitle(list[0]);
          this.breadcrumbObj.subTitle = this.$dataInfo.getSubTitle(this.formItem.taskType);
        } else {
          this.$Message.error(data.returnMsg)
        }
      })
    } else {
      this.isEdit = false;
      this.formItem.taskType = this.$route.query.taskType;
      let list = this.formItem.taskType.split('-');
      this.breadcrumbObj.title = this.$dataInfo.getTitle(list[0]);
      this.breadcrumbObj.subTitle = this.$dataInfo.getSubTitle(this.formItem.taskType);
    }
  },
  methods: {
    //提交任务
    submitTask() {
      if (this.isEdit) {
        api.update(this.formItem).then(({data}) => {
          if (data.returnCode === 200) {
            this.$Message.success('更新成功!');
            this.exitBtn();
          } else {
            this.$Message.error(data.returnMsg);
          }
        })
      } else {
        api.insert(this.formItem).then(({data}) => {
          if (data.returnCode === 200) {
            this.$Message.success('添加成功!');
            this.exitBtn();
          } else {
            this.$Message.error(data.returnMsg);
          }
        })
      }
    },
    exitBtn() {
      this.$router.push({
        path: '/task',
        query: {
          type: this.formItem.taskType
        }
      })
    },
    onNextStep() {
      if (Number(this.formItem.currFlow) === 4) {
        this.formItem.currFlow = 0;
      } else {
        this.formItem.currFlow = Number(this.formItem.currFlow) + 1;
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../styles/common";

/deep/ .operate-card .ivu-card-head p {
  font-size: 18px;
}

/deep/ .operate-step .ivu-steps-item {
  height: 33px;
  line-height: 33px;
}

/deep/ .ivu-steps.ivu-steps-small .ivu-steps-head-inner {
  margin-top: 6px;
}

.task-operate {
  margin-top: 125px;
  margin-bottom: 30px;
  width: 100%;

  .operate-card {
    width: 1200px;
    margin: 0 auto;
  }

  .operate-form {
    margin: 30px 80px 30px;
  }

  .operate-bread {
    margin: 5px 42px;
  }
}

.width-num {
  width: 350px;
}
</style>
